import React, { Component } from 'react';
import { Table, Button, Divider, Tag, Breadcrumb, Layout } from 'antd';
const { Content } = Layout;
import { PlusCircleOutlined } from '@ant-design/icons';
import { query } from '../../utils/utils';

const columns = [
  {
    title: '商品ID',
    width: 50,
    dataIndex: 'id',
    key: 'id',
    fixed: 'left',
  },
  {
    title: '商品名称',
    width: 100,
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '商品图片',
    width: 150,
    dataIndex: 'cover',
    key: 'cover',
    render: (cover) => (
      <img src={cover} style={{ height: 60 }} />
    )
  },
  {
    title: '商品价格',
    width: 150,
    dataIndex: 'price',
    key: 'price'
  },
  {
    title: '商品销量',
    width: 150,
    dataIndex: 'sales_volume',
    key: 'sales_volume'
  },
  {
    title: '商品分类',
    dataIndex: 'category',
    key: 'category',
    width: 150,
  },
  {
    title: '商品品牌',
    dataIndex: 'brand',
    key: 'brand',
    width: 150,
  },
  {
    title: '商品状态',
    dataIndex: 'status',
    key: 'status',
    width: 150,
    render: (status) => {
      if (status == 1) {
        return <Tag color="green">上架</Tag>
      } else {
        return <Tag color="red">下架</Tag>
      }
    }
  },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 100,
    render: () => (
      <Button type="danger" size="small">删除</Button>
    ),
  },
];

export default class ProductList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      pageSize: 1000
    }
  }
  render() {
    return (
      <div>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>管理中心</Breadcrumb.Item>
          <Breadcrumb.Item>商品管理</Breadcrumb.Item>
          <Breadcrumb.Item>商品列表</Breadcrumb.Item>
        </Breadcrumb>
        <Content
          className="site-layout-background"
          style={{
            padding: 24,
            margin: 0,
            minHeight: 280,
          }}
        >
          <Button onClick={() => { this.props.history.push('/admin/product-add') }} icon={<PlusCircleOutlined />} type="primary">新增商品</Button>
          <Divider />
          <Table columns={columns} dataSource={this.state.list} scroll={{ x: 1500, y: 300 }} />
        </Content>
      </div>
    )
  }
  componentDidMount() {
    this.getList();
  }
  getList() {
    const { page, pageSize } = this.state;
    query(`/index.php?c=product&a=lists&page=${page}&page_num=${pageSize}`).then(res => {
      if (res.errcode == 0) {
        res.data.list.forEach((item, index, arr) => {
          arr[index].key = item.id;
        });
        this.setState({
          list: res.data.list
        });
      }
    })
  }
}
